<template>
  <div class="layout">
    <Toolbar class="toolbar" />
    <div class="body">
      <div class="left"><LabelTree /></div>
      <div class="center"><Annotator /></div>
      <div class="right"><ResultPanel /></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Toolbar from '../components/Toolbar.vue'
import LabelTree from '../components/LabelTree.vue'
import Annotator from '../components/Annotator.vue'
import ResultPanel from '../components/ResultPanel.vue'
</script>

<style scoped>
.layout { display:flex; flex-direction:column; height:100vh; }
.toolbar { flex: 0 0 auto; border-bottom: 1px solid #eee; }
.body { flex: 1 1 auto; display:flex; overflow: hidden; }
.left { width: 280px; border-right:1px solid #eee; overflow:auto; }
.center { flex: 1; overflow:auto; padding: 12px; }
.right { width: 320px; border-left:1px solid #eee; overflow:auto; }
</style>
